﻿@page "/positioning"

<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
    <a class="btn btn-sm btn-bd-light my-2 my-md-0" href="https://github.com/jdtcn/BlazorDateRangePicker/blob/master/Demo.Shared/Pages/Positioning.razor"
       title="View this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
    <h3>Popup alignment</h3>
</div>

<p>The picker can be aligned to the left, to the right (default), or centered under the HTML element it's attached to</p>

<Example Text="@ExampleTextLeft">
    <DateRangePicker Opens="SideType.Left" />
</Example>

<Example Text="@ExampleTextCenter">
    <DateRangePicker Opens="SideType.Center" />
</Example>

<Example Text="@ExampleTextRight">
    <DateRangePicker Opens="SideType.Right" />
</Example>

<h4>Popup direction</h4>

<p>Whether the picker appears below (default) or above the HTML element it's attached to</p>

<Example Text="@ExampleTextUp">
    <DateRangePicker Drops="DropsType.Up" />
</Example>

@code {
    private string ExampleTextLeft = "<DateRangePicker Opens=\"SideType.Left\" />";
    private string ExampleTextCenter = "<DateRangePicker Opens=\"SideType.Center\" />";
    private string ExampleTextRight = "<DateRangePicker Opens=\"SideType.Right\" />";
    private string ExampleTextUp = "<DateRangePicker Drops=\"DropsType.Up\" />";
}
